import React, { useEffect, useState } from 'react';
import ReactPaginate from 'react-paginate';
import './page.css';

const items=[{id:1,username:'有点is',openid:'111',usertime:'2021-11-5'}
,
{id:2,username:'有点is',openid:'111',usertime:'2021-11-5'},
{id:3,username:'有点is',openid:'111',usertime:'2021-11-5'},
{id:4,username:'有点is',openid:'111',usertime:'2021-11-5'},
{id:5,username:'有点is',openid:'111',usertime:'2021-11-5'},
{id:6,username:'有点is',openid:'111',usertime:'2021-11-5'},
{id:7,username:'有点is',openid:'111',usertime:'2021-11-5'},
{id:8,username:'有点is',openid:'111',usertime:'2021-11-5'},
{id:9,username:'有点is',openid:'111',usertime:'2021-11-5'},
{id:10,username:'有点is',openid:'111',usertime:'2021-11-5'},
{id:11,username:'有点is',openid:'111',usertime:'2021-11-5'},
]
// const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

function Items({ currentItems }) {
  return (
    <>
      {currentItems &&
        currentItems.map((item,index) => (
          <li key={item.id}>
              <span>{item.id}</span><span>{item.username}</span><span>{item.openid}</span><span>{item.usertime}</span>
              <button >删除</button>
          </li>
        ))}
    </>
  );
}

function PaginatedItems({ itemsPerPage }) {
  
  const [currentItems, setCurrentItems] = useState(null);
  const [pageCount, setPageCount] = useState(0);
  const [itemOffset, setItemOffset] = useState(0);

  useEffect(() => {
    // Fetch items from another resources.
    const endOffset = itemOffset + itemsPerPage;
    console.log(`Loading items from ${itemOffset} to ${endOffset}`);
    setCurrentItems(items.slice(itemOffset, endOffset));
    setPageCount(Math.ceil(items.length / itemsPerPage));
  }, [itemOffset, itemsPerPage]);

  // Invoke when user click to request another page.
  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % items.length;
    console.log(
      `User requested page number ${event.selected}, which is offset ${newOffset}`
    );
    setItemOffset(newOffset);
  };

  return (
    <>
      <Items currentItems={currentItems} />
      <ReactPaginate
        breakLabel="..."
        nextLabel="next >"
        onPageChange={handlePageClick}
        pageRangeDisplayed={5}
        pageCount={pageCount}
        previousLabel="< previous"
        renderOnZeroPageCount={null}
      />
    </>
  );
}

export default PaginatedItems;